<template>
    <div class="body">
        <!-- <h2>人员管理</h2>
      <p class="info">添加人员</p> -->


        <div class="table_content">


            <div class="table">

                <el-table v-loading="table_loading" :data="tableData.data" :border="true">

                    <el-table-column prop="id" label="ID" width="80" align="center">
                    </el-table-column>


                    <el-table-column prop="target_msg" label="操作">
                    </el-table-column>



                    <el-table-column label="操作人" align="center">
                        <template slot-scope="scope">
                            <div>{{ scope.row.operator_user.nickname }}</div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="createtime" label="操作日期" align="center">
                    </el-table-column>


                    <el-table-column label="变更内容" align="center">
                        <template slot-scope="scope">
     
                        </template>
                    </el-table-column>
                    
                </el-table>


                <el-pagination class="pagination" @size-change="handleTableSizeChange"
                    @current-change="handleTableCurrentChange" :current-page="currentPage4"
                    :page-sizes="$pageSize" :page-size="tableParams.size" layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.total">
                </el-pagination>

            </div>

        </div>

    </div>
</template>

<script>
import { manageLogs } from '@/api/apiSystem'
import { getUploadingImgUrl, getUploadingVideoUrl, getImgUrl } from '@/api/uploading'
import { arrayToString, stringToArray } from '@/utils/arrayUtil'
import { formatTimestamp } from '@/utils/datetimeUtil'
export default {
    name: "Index",
    data() {
        return {
            tableParams: {
                page: 1,
                size: 15,
                // status: 'all',
                // trade_type: 'all',
            },
            tableData: {
                current_page: 1,
                data: [],
                last_page: 1,
                per_page: "15",
                total: 0
            },
            currentPage4: 1,
            group: [],
            dialogConfig: {
                title: "添加人员"
            },
            table_loading: false,
            dialogFormVisible: false,
            fromViewCofing: {
                input_width: '120px',
                label_width: '120px',
            },
        };
    },
    created() {
        this.loadTableData();
    },
    methods: {
        //图片展示
        imgShow(url) {
            return getImgUrl(url)
        },
        // 列表请求
        loadTableData() {
            const _this = this;
            _this.table_loading = true;
            manageLogs(_this.tableParams)
                .then((response) => {
                    const result = response;
                    var tableData = result.data.datalist;
                    for (var i = 0; i < tableData.data.length; i++) {
                        tableData.data[i]['createtime'] = formatTimestamp(tableData.data[i]['createtime']);
                    }
                    _this.tableData = tableData;
                    _this.table_loading = false;
                });
        },
        // 初始化表单数据
        from_init() {
            this.form = {
                id: 0,
                account: "",
                password: "",
                password_confirmation: '',
                mobile: "",
                nickname: "",
                group_id: "",
                status: "normal",
            }
        },
        // 表格操作
        handleTableEdit(index, row, status) {
            var title = "";
            if (status == 'approve') {
                title = "是否通过该笔交易?";
            } else if (status == 'refuse') {
                title = "是否拒绝该笔交易";
            }

            this.$confirm(title, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                var params = {
                    id: row.id,
                    status: status
                }
                const _this = this;
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                obreply(params)
                    .then((response) => {
                        _this.$message({
                            message: response.msg,
                            type: 'success'
                        });
                        loading.close();
                        _this.loadTableData();
                    })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });

        },

        // 数量改变
        handleTableSizeChange(val) {
            this.tableParams.size = val;
            this.loadTableData();
        },
        // 页数改变
        handleTableCurrentChange(val) {
            this.tableParams.page = val;
            this.loadTableData();
        },
    },
};
</script>

<style lang="scss">
.body {
    padding: 5px;
    background-color: #F5F5F5;


    .table_operate {
        background-color: #fff;

        .btn_add {
            margin-top: 12px;
            margin-bottom: 12px;
            margin-left: 12px;
        }
    }

    .table_filtrate {
        margin-bottom: 10px;
        display: flex;
        background-color: #fff;
        padding: 20px;
        align-items: center;
        border-radius: 12px;


        .tag {
            font-size: 12px;
            color: #424242;
            padding-right: 10px;
        }

        .input {
            padding-right: 30px;
        }


        .input_fuzzy_search {
            width: 230px;
            margin-right: 10px;
        }
    }

}
</style>